<template>
    <div id="chartRadar"></div>
</template>

<script setup>
import { ref, onMounted, computed, markRaw, watch } from "vue"
import * as echarts from 'echarts'

// 接受父组件的数据
const props = defineProps({
    trafficWay: {
        type: Array,
        default: []
    },
    title: {
        type: String,
        default: ''
    }
})

const parentData = computed(() => props.trafficWay)

// 监听父组件数据的变化
watch(() => parentData , (newValue) => {
        // 先销毁组件
        if (chartRadar.value) {
            echarts.dispose(chartRadar.value)
        }
        chartRadar.value = markRaw(echarts.init(document.getElementById('chartRadar')))
        createRadarChart(chartRadar.value)
    },
    { immediate: false, deep: true }
)

// 图表对象
const chartRadar = ref(null)


const createRadarChart = (chart) => {
    var data = [];
    // const sum = parentData.value.reduce((accumulator, currentValue) => accumulator + currentValue.value, 0);
    const indicator = []

    const color = ['#3c90ff', '#fff225', '#24ffdf', '#ff9c3c', '#7536ff']
    for (var i = 0; i < parentData.value.length; i++) {
        console.log(parentData.value[i]);
        indicator.push({
            text: parentData.value[i].name,
            min: 0,
            max: 10000000,
            val: parentData.value[i].value,
            position: 'center'
        })
        data.push(parentData.value[i].value)
    }

    let option = {
        backgroundColor:"rgba(19, 21, 44, 1)",
        tooltip: {
            trigger: 'item',
            formatter: function (data) {
                // console.log(data);
            },
        },
        radar: [{
            indicator: indicator,
            // indicator: indicatorData,
            splitNumber: 7,
            center: ['50%', '50%'],
            //shape: 'circle',
            name: {
                formatter: function (name, indicator) {
                    if (indicator.position === 'left') {
                        return `{name|${name}}\n\n{val|${indicator.val}}`;
                    } else if (indicator.position === 'right') {
                        return `{name2|${name}}\n\n{val2|${indicator.val}}`;
                    } else {
                        return `{name3|${name}}\n\n{val3|${indicator.val}}`;
                    }
                },
                rich: {
                    name: {
                        color: '#B3B3B7',
                        align: 'left',
                        fontSize: 12,
                    },
                    val: {
                        color: '#FFFFFF',
                        align: 'left',
                        fontSize: 12,
                        fontWeight: 600,
                    },
                    name2: {
                        color: '#B3B3B7',
                        align: 'right',
                        fontSize: 12,
                    },
                    val2: {
                        color: '#FFFFFF',
                        align: 'right',
                        fontSize: 12,
                        fontWeight: 600,
                    },
                    name3: {
                        color: '#B3B3B7',
                        align: 'center',
                        fontSize: 12,
                    },
                    val3: {
                        color: '#FFFFFF',
                        align: 'center',
                        fontSize: 12,
                        fontWeight: 600,
                    },
                },
                textStyle: {
                    color: '#ffffff',
                },
         },
         splitArea: {
            areaStyle: {
               color: ['#16172D', '#36365C'],
            },
         },
         axisLine: {
            lineStyle: {
               color: '#5A5A89',
            },
         },
         splitLine: {
            lineStyle: {
               color: '#5A5A89',
            },
         },
      },
        ],
        series: [
            {
                type: 'radar',
                lineStyle: {
                    normal: {
                    color: '#99EFFA',
                    width: 2,
                    },
                },
                lable: {
                    show: true,
                },
                itemStyle: {
                    color: '#99EFFA', //顶点的颜色
                },
                data: [
                    {
                    value: data,
                    // value: valArr,
                    name: '图一',
                    symbolSize: 10,
                    symbol: 'circle',
                    areaStyle: {
                        color: {
                            type: 'radial',
                            x: 0.5,
                            y: 0.5,
                            r: 0.5,
                            colorStops: [
                                {
                                offset: 0,
                                color: 'transparent',
                                },
                                {
                                offset: 0.5,
                                color: 'transparent',
                                },
                                {
                                offset: 1,
                                color: 'rgba(59,101,251,.9)',
                                },
                            ],
                            globalCoord: false,
                        },
                        // opacity: 0 // 区域透明度
                    },
                    itemStyle: {
                        normal: {
                            color: '#000000', //拐点颜色
                            borderColor: '#99EFFA', //拐点边框颜色
                            borderWidth: 2, //拐点边框大小
                        },
                        emphasis: {
                            color: '#000000', //hover拐点颜色定义
                        },
                    },
                    },
                ],
            },
        ],
    };

    
    chart.setOption(option);
}

const resize = () => {
    chartRadar.value.resize();
}

onMounted(() => {
    chartRadar.value = markRaw(echarts.init(document.getElementById('chartRadar')))
    createRadarChart(chartRadar.value)

    window.addEventListener("resize", resize);
})


</script>

<style lang="scss" scoped>
#chartRadar {
    width: 100%;
    height: 100%;
}
</style>